<template>
	<image class="uni-lazyload" :class="active ? 'active' : ''" :src="imgsrc" :mode="imgmode" @click="bindClick" @load="imgActive()" :style="'height:' + height + 'px'"></image>
</template>

<script>
export default {
	props: {
		imgsrc: {
			type: String,
			default: ''
		},
		imgmode: {
			type: String,
			default: 'widthFix'
		},
		height: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			active: false
		};
	},
	methods: {
		bindClick() {
			console.log('click img');
			this.$emit('click');
		},
		imgActive() {
			this.active = true;
			//console.log('====================data=' + this.imgsrc);
		}
	}
};
</script>

<style>
.uni-lazyload {
	opacity: 0;
	transition: all 0.3s ease-in-out;
	height: 100%;
}
.uni-lazyload.active {
	opacity: 1;
	transition: all 0.3s ease-in-out;
}
</style>
